<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>页面元素规范与说明</title>
        <!--   首先引入layui的css样式     -->
        <link rel="stylesheet" href="../layui-lib/layui/css/layui.css">
    </head>
    <body>
        <!--
              CSS命名规范
              class命名前缀: layui, 连接符: -, 如: class="layui-form"
              命名格式一般分为两种:
                    一: layui-模块名-状态或类型
                    二: layui-状态或类型。因为有些类并非是某个模块所特有，他们通常会是一些公告类。如: 一(定义按钮的原始风格):
                    class="layui-btn layui-btn-primary",二(定义内联块状元素)： class="layui-inline"
                    大概记住这些简单的规则，会让你在填充HTML的时候显得更加得心应手。另外,如果你是开发Layui拓展(模块),你最好也要遵循于
                    类似的规则,并且请勿占用layui已经命名好的类，假设你是在帮layui开发一个markdown编辑器,你的css书写规则应该如下:

                    .layui-markdown{border: 1px solid #e2e2e2;}
                    .layui-markdown-tools{}
                    .layui-markdown-text{}
              -->
        <!--   你如果改变了结构，极有可能会导致Tab功能失效,所以在嵌套HTML的时候,你应该细读     -->
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">标题一</li>
                <li>标题二</li>
                <li>标题三</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">内容1</div>
                <div class="layui-tab-item">内容2</div>
                <div class="layui-tab-item">内容3</div>
            </div>
        </div>


    </body>
</html>